<template>
    <div style="padding-top: 1%">
        <Card :bordered="false" style="margin-left: 16%;margin-right: 1%" dis-hover>
            <p slot="title"
               style="height: 36px;font-size: larger;font-weight: bolder;display: flex;justify-content: space-between">
                <span>消息通知 / 通知列表</span>
                <RadioGroup v-model="queryVo.read" type="button" @on-change="getInform">
                    <Radio :label="0">全部</Radio>
                    <Radio :label="1">未读</Radio>
                    <Radio :label="2">已读</Radio>
                </RadioGroup>
            </p>
            <!--消息通知表格-->
            <div style="height:480px">
                <Table height="472" stripe :columns="informColumns" :data="informList">
                    <template slot-scope="{ row }" slot="readStatus">
                        <Tag type="dot" v-show="row.inRead" size="large" color="cyan">已读</Tag>
                        <Tag type="dot" v-show="!row.inRead" size="large" color="red">未读</Tag>
                    </template>
                    <template slot-scope="{ row }" slot="user">
                            <span class="ivu-avatar ivu-avatar-circle ivu-avatar-image ivu-avatar-large">
                                <img v-show="row.user!==null" style="width: 40px;height: 40px"
                                     :src="row.user!==null?row.user.uheadpicture:uheadpicture">
                            </span>
                        <span style="margin-left: 10px"
                              class="i-layout-header-user-name">{{row.user!==null?row.user.unickname:'无'}}</span>
                    </template>
                </Table>
            </div>
            <!--分页-->
            <div>
                <Page style="height: 30px" :total="total" :page-size="queryVo.pageSize" show-elevator show-sizer
                      show-total @on-change="changePageNum" :page-size-opts="pageSizeChoice"
                      @on-page-size-change="changePageSize"/>
            </div>
        </Card>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        // 查询条件
        queryVo: {
          pageNum: 1,
          pageSize: 9,
          read: 0,
          my: false
        },
        // 总数
        total: 0,
        informList: [],
        // 消息通知表格映射
        informColumns: [
          {
            type: 'index',
            align: 'center'
          },
          {
            title: '通知内容',
            key: 'inContent',
            align: 'center',
            width: '600px'
          },
          {
            title: '通知时间',
            key: 'inInformtime',
            align: 'center',
            width: '180px'
          },
          {
            title: '状态',
            slot: 'readStatus',
            align: 'center'
          },
          {
            title: '通知用户',
            slot: 'user'
          }
        ],
        // 每页个数选择
        pageSizeChoice: [9, 15, 30, 50, 100]
      }
    },
    mounted() {
      this.getInform()
    },
    methods: {
      getInform() {
        var params = new URLSearchParams(this.queryVo)
        this.$http.get('inform', { params: params }).then(res => {
          res = res.data
          this.informList = res.data
          this.total = res.count
        })
      },
      // 改变当前页码
      changePageNum(pagenum) {
        this.queryVo.pageNum = pagenum
        this.getInform()
      },
      // 改变每页个数
      changePageSize(pagesize) {
        this.queryVo.pageSize = pagesize
        this.getInform()
      }
    }
  }
</script>

<style scoped>

</style>
